<template>
<div>
     <!-- 表格 -->
    <el-table
      :data="userList.records"
      style="width: 100%"
      text-align="center"
      height="182"
      highlight-current-row
      @current-change="handleCurrentChange"
      @row-click="handleTableRow"
      :header-cell-style="{ fontSize: '15px', color: 'rgb(83, 79, 79)' }"
      border
    >
      <el-table-column fixed prop="userName" label="用户名" width="255">
      </el-table-column>
      <el-table-column prop="userPwd" label="密码" width="260">
      </el-table-column>
      <el-table-column prop="userGrade" label="等级" width="255">
      </el-table-column>
       <el-table-column prop="userTrueName" label="真实姓名" width="252">
      </el-table-column>
    </el-table>



    <!-- 页码 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="userList.pages * 10"
      @click="get()"
      @current-change="handleChange"
      style="margin-left: 100px; margin-bottom: 100px"
    >
    </el-pagination>

    <!-- 添加用户 -->
      <div style="text-align: left">
        <el-button
          type="info"
        @click="dialogFormVisible = true"
        style="
          width: 100px;
          margin-right: 30px;
          margin-left: 70px;
          border: 1px solid rgb(164, 171, 171);
          color: rgb(83, 79, 79);
          font-weight: bold;
          font-size: 13px;
        "
        size="small"
        plain
        >添加用户</el-button
      >
      <el-dialog
        title="添加用户"
        :visible.sync="dialogFormVisible"
        width="60%"
        custom-class="customClass"
      >
        <div style="" class="msg">
          <div>
            <p style="margin: 50px 30px">
              用户名：<input type="text" v-model="userName" />
            </p>
            <p style="margin: 50px 30px">
              密码：<input type="text" v-model="userPwd" />
            </p>
            <p style="margin: 50px 30px">
              确认密码：<input type="text" v-model="userPwd" />
            </p>
            <p style="margin: 50px 30px">
              真实姓名：<input type="text" v-model="userTrueName" />
            </p>
            <p style="margin: 50px 30px">
              用户等级：<select v-model="userGrade">
                <option selected>超级管理员</option>
                <option>资料管理员</option>
                <option>灾情管理员</option>
                <option>专家管理员</option>
                <option>库房管理员</option>
              </select>
            </p>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addUser()">确 定</el-button>
        </div>
      </el-dialog>


      <!-- 删除用户 -->
       <el-button
        type="info"
        @click="delUser(userId)"
        style="
          width: 107px;
          border: 1px solid rgb(164, 171, 171);
          color: rgb(83, 79, 79);
          font-weight: bold;
          font-size: 13px;
        "
        size="small"
        plain>删除用户
        </el-button>

         <!-- 修改用户信息 -->
       <el-button
        type="info"
        @click="findId(userId)"
        style="
          width: 107px;
          border: 1px solid rgb(164, 171, 171);
          color: rgb(83, 79, 79);
          font-weight: bold;
          font-size: 13px;
        "
        size="small"
        plain>修改用户信息
        </el-button>
        <el-dialog
        title="修改用户信息"
        :visible.sync="dialogVisible"
        width="650px"
        :before-close="handleClose"
      >
        <div class="msg" style="display: flex">
          <div style="">
            <p style="margin: 50px 30px">用户名：{{ list.userName }}</p>
            <p style="margin: 50px 30px">
              新密码：<input type="text" v-model="userPwd" />
              </p>
            <p style="margin: 50px 30px">
              确认新密码：<input type="text" v-model="userPwd" />
              </p>
            <p style="margin: 50px 30px">真实姓名:{{ list.userTrueName }}</p>
            <p style="margin: 50px 30px">
              用户等级：<select v-model="userGrade">
                <option selected>超级管理员</option>
                <option>资料管理员</option>
                <option>灾情管理员</option>
                <option>专家管理员</option>
                <option>库房管理员</option>
              </select>
              </p>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateUser(userId)">确 定</el-button >
        </span>
      </el-dialog>



<!-- 模糊查询 -->
      <session>
        <div>
          <fieldset style="width: 200px">
            <legend>查询用户信息</legend>
            <form action="" style="width: 260px;height:80px">
              <div style="margin-top:15px">
                用户等级：<select v-model="userGrade">
                <option selected>超级管理员</option>
                <option>资料管理员</option>
                <option>灾情管理员</option>
                <option>专家管理员</option>
                <option>库房管理员</option>
              </select>
              </div>
              <br />
              <input
                type="button"
                value="查询"
                @click="get()"
                style="margin-left: 140px"
              />
            </form>
          </fieldset>
        </div>
      </session>

    </div>


  </div>
  
</template>

<script>
import {mapState,mapMutations,mapActions} from 'vuex'
export default {
  data(){
    return{
      dialogFormVisible:false,
      dialogVisible: false,
      formLabelWidth: "70px",
      userId:"",
      userName:"",
      userPwd:"",
      userGrade:"",
      userTrueName:"",
      list:[],
      pageNo:"",
      pages:""
    }
  },
  computed:{
    ...mapState("user",["userList","userParam"])
  },
  methods:{
    ...mapActions("user",["findAllUser"]),
    ...mapMutations("user",["setUserParam"]),
    ...mapActions("user",["findGrade"]),
    // 添加用户
    async addUser(){
       let parmaObj = {
        userName: this.userName,
        userPwd: this.userPwd,
        userTrueName: this.userTrueName,
        userGrade: this.userGrade,
      };
      let info = await this.ajax.getSubmit("/api/user/addUser", parmaObj);
      console.log(info);
      if (info != null) {
        alert("添加成功！");
      } else {
        alert("不能为空！");
      }
      this.dialogFormVisible = false;
      this.findAllUser();
    },
    // 删除用户
    async delUser(userId){
      let paramObj = {userId:this.userId}
      let info = await this.ajax.getSubmit("/api/user/delUser",paramObj)
      this.findAllUser()
      alert("删除成功！")
    },
    // 修改用户信息
    async updateUser(userId){
      let paramObj = {userId:this.userId,userPwd:this.userPwd,userGrade:this.userGrade}
      let info = await this.ajax.getSubmit("/api/user/updateUser",paramObj)
      console.log(info)
      this.list = info
      this.dialogVisible = false
      this.findAllUser()
    },
    async findId(userId){
      let paramObj = {userId:this.userId}
      let info = await this.ajax.getSubmit("/api/user/findId",paramObj)
      console.log(info)
      this.list = info
      this.dialogVisible = true
    },
    get() {
      let paramObj = this.userParam;
      paramObj.userGrade = this.userGrade;
      // 把最新的信息装入 store中的 param对象中
      this.setUserParam(paramObj);
      this.findGrade()
    },
    handleChange(index) {
      console.log(`当前页: ${index}`);
      this.pageNo = index;
      console.log("页码" + this.pageNo);
      this.cut(this.pageNo);
    },
    cut(pageNo) {
      let paramObj = this.userParam;
      paramObj.pageNo = pageNo;
      this.setUserParam(paramObj);
      this.findAllUser();
    },
    handleTableRow(row) {
      console.log(row.userId);
      this.userId = row.userId;
    },
    handleCurrentChange(val) {
      this.currentRow = val;
      console.val;
    },
    handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
  },
  created(){
    this.findAllUser()
    console.log(this.userList.records)
  }


}
</script>

<style>
div > div > session {
  position: relative;
}
div > div > session > div:first-child {
  position: absolute;
  left: 230px;
  bottom: -45px;
  height: 100px;
}
</style>